import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import Search from './components/search';
import Detail from './components/detail';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import AxColumnAction from '@/components/AxList/AxColumnAction';

const Index: React.FC<any> = props => {
    const [expandedRowKeys, setExpandedRowKeys] = useState([]);
    /** 配置列 */
    const columns = [
        {
            title: '标题',
            dataIndex: 'orgName2',
            width: axconst.width.longx,
        },
        {
            title: '开始时间',
            dataIndex: 'orgName3',
            width: axconst.width.time,
        },
        {
            title: '结束时间',
            dataIndex: 'orgName3',
            width: axconst.width.time,
        },
        {
            title: '结算总金额',
            dataIndex: 'orgName8',
            width: axconst.width.fouronly,
        },
        {
            // title: '操作',
            // dataIndex: 'orgName8',
            // width: axconst.width.operate8,
            // render: (val: any, record: any) => (
            //     <AxColumnAction
            //         buttons={[
            //             {
            //                 text: '查看',
            //                 // onClick: () => this.handleDetailValues(true, record),
            //             },
            //         ]}
            //     />
            // ),
        },
    ];

    const data = {
        list: [{
            id: '1',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }, {
            id: '2',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }, {
            id: '3',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }, {
            id: '4',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }, {
            id: '5',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }, {
            id: '6',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中'
        }]
    }

    const handleExpandedRowsChange = (expandedRows: any) => {
        setExpandedRowKeys(expandedRows);
    };

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [];

    const filter: AxStandardCardFilterType[] = []

    return (
        <>
            <AxStandardWideList
                columns={columns}
                button={button}
                filter={filter}
                data={data}
                checkboxModel={false}
                AdvancedSearch={Search}
                expandedRowKeys={expandedRowKeys}
                onExpandedRowsChange={handleExpandedRowsChange}
                expandedRowRender={(record: any) => (
                    <Detail schemeId={record.id} />
                )}
            />
        </>
    );
};

export default Index;
